<template>
  <view class="container">
    <view class="handle-btn-area" style="color: #0f76bc; padding: 30rpx">
      <view
        class=""
        style="margin-bottom: 15rpx; display: flex; flex-direction: column; align-items: center"
      >
        <view
          class="handle-btn"
          style="background-color: #fff"
          @click="routeTo('/other/apply-construction-team/apply-construction-team', 1)"
        >
          <u-icon :name="getImageUrl('sgdzx.png')" size="50"></u-icon>
        </view>
        <view class=""> 成为施工队 </view>
      </view>

      <view
        class=""
        style="margin-bottom: 15rpx; display: flex; flex-direction: column; align-items: center"
      >
        <view class="handle-btn" @click="routeTo('/other/interaction-push/interaction-push', 0)">
          <u-icon :name="getImageUrl('fbxx.png')" size="25"></u-icon>
        </view>
        <view class=""> 项目发布 </view>
      </view>

      <view
        class=""
        style="margin-bottom: 15rpx; display: flex; flex-direction: column; align-items: center"
      >
        <view class="handle-btn" @click="routeTo('/other/storage-order/storage-order', 1)">
          <u-icon :name="getImageUrl('wdfb.png')" size="30"></u-icon>
        </view>
        <view class=""> 我的发布 </view>
      </view>
    </view>
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="60">
          <view class=""> </view>
        </u-navbar>
        <view class="construction-top">
          <!-- <view class="construction-top-info">
						<u-icon :name="getImageUrl('gcxx.png')" size="95rpx"></u-icon>
						<view class="construction-info-item">
							<view class="">
								找工程信息
							</view>
							<p>全国拟建</p>
						</view>
					</view> -->

          <view
            class="construction-top-info"
            @click="routeTo('/other/construction-team/construction-team', 0)"
          >
            <u-icon :name="getImageUrl('sgd.png')" size="95rpx"></u-icon>
            <view class="construction-info-item">
              <view class=""> 找施工队 </view>
              <p>施工队案例信息透明</p>
            </view>
          </view>
        </view>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>

        <!-- <view class="construction-top-tip" >
					<view class="construction-top-item">
						最新发布
					</view>
					<view class="construction-top-item">
						参与热度
					</view>
				</view> -->
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      </view>

      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem" v-for="(item2, index2) in tabsList" :key="index2">
          <z-paging
            ref="paging"
            v-model="itemList[current]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="info_area">
              <view
                class="info_box"
                @click="
                  routeTo(
                    '/other/construction-detail/construction-detail?id=' + item.id,
                    ActiveXObject
                  )
                "
                v-for="(item, index) in itemList[current]"
                :key="index"
              >
                <view class="info_box-top">
                  <view class="info_box-top-left">
                    <view class="info-top-left-tip"> 找施工队 </view>
                    <text class="info-top-left-price">
                      预算:¥{{ (item.budgetPrice * 0.01).toFixed(2) }}
                    </text>
                    <text class="info_box-top-right">{{ item.enrollCount }}人参与</text>
                  </view>
                  <view class="info_box-address">
                    {{ item.provinceCityArea }}
                  </view>
                </view>
                <view class="info_box-title">
                  {{ item.name }}
                </view>

                <view class="info_box-desc-time">
                  <view class="info_box-desc"> 项目要求：{{ item.requireCondition }} </view>
                  <!-- <view class="info_box-time">
										施工周期：{{formatTime(item.enrollStartTime)}} - {{formatTime(item.enrollEndTime)}}
									</view> -->
                </view>

                <view class="info-floor">
                  <text> {{ formatTime(item.enrollEndTime) }}截至报名 </text>

                  <text class="info-floor-right"> {{ formatTime(item.createTime) }}发布 </text>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '正在进行'
        },
        {
          name: '即将开始'
        }
      ],
      itemList: [[], []],
      order_id: ''
    }
  },
  onLoad(res) {},
  onShow() {
    this.queryList()
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },

  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get(
          `/app-api/construction/project-info/page?pageNo=${pageNo}&pageSize=${pageSize}&status=10`
        )
        .then((res) => {
          this.$refs.paging[this.current].complete(res.data.list)
        })
    },

    onOrderCancel(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u.api.setOrderCancel(item.id).then((res) => {
          self.$u.toast('取消成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onOrderPayment(item) {
      let self = this
      // self.$u.api.setTestPayments({
      // 	order_no: item.order_no,
      // 	openid: uni.getStorageSync('openid')
      // }).then(res => {
      // 	setTimeout(function() {
      // 		self.onOrderLoad(self.current, null, true);
      // 	}, 500);
      // });
      this.$utils.route({
        url: '/goods/payment/payment',
        params: {
          order_id: item.id,
          money: item.pay_price,
          total_weight: item.total_weight,
          delivery_price: item.delivery_price
        }
      })
    },
    onOrderConfrim(item) {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认收货吗？', () => {
        self.$u.api.setOrderConfirm(item.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            self.onOrderLoad(self.current, null, true)
          }, 500)
        })
      })
    },
    onResellPush(item) {
      this.$utils.route({
        url: '/goods/resell-push/resell-push',
        params: {
          id: item.id
        }
      })
    },
    onPushComment(item) {
      this.$utils.route({
        url: '/other/push-comment/push-comment',
        params: {
          id: item.id
        }
      })
    },
    onOrderDetail(item) {
      // this.$utils.route({
      // 	url: '/pages/order-details/order-details',
      // 	params: {
      // 		id: item.id
      // 	}
      // });
    },
    routeTo(url, e) {
      if (e) {
        this.$u.get('/app-api/member/user/get').then((res) => {
          if (res.data.idcardVerified) {
            uni.navigateTo({
              url
            })
            return
          }
          uni.dialog.confirm('温馨提示', '施工队入驻需要实名认证，是否前往认证？', () => {
            uni.navigateTo({
              url: '/other/set-phone-pwd-realname/set-phone-pwd-realname?status=5'
            })
          })
        })
        return
      }

      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  background: #f0f1f2;
}

.handle-btn-area {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 20rpx;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
}

.handle-btn {
  margin-bottom: 20rpx;
  width: 50rpx;
  height: 50rpx;
  background-color: #0f76bc;
  border-radius: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.construction-top {
  display: flex;
  padding: 30rpx;
  margin: 20rpx 0;
  align-items: center;
  background-color: #fff;
}

.construction-top-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.construction-top-info image {
  width: 90rpx;
  height: 90rpx;
}

.construction-info-item {
  margin-left: 10rpx;
}

.construction-info-item view {
  font-size: 32rpx;
}

.construction-info-item p {
  font-size: 28rpx;
  color: #999999;
}

.construction-top-tip {
  display: flex;
}

.construction-top-item {
  display: inline-block;
  margin: 20rpx;
  font-size: 33rpx;
}

.info_area {
  padding: 20rpx;
  margin-bottom: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info_box {
  width: 700rpx;
  background-color: #ffffff;
  padding: 15rpx;
}

.info_box-top {
  overflow: auto;
}

.info_box-desc-time {
  margin-bottom: 20rpx;
  line-height: 43rpx;
}

.info_box-address {
  font-size: 27rpx;
  color: #666666;
}

.info-floor {
  margin: 15rpx 0;
  position: relative;
  font-size: 25rpx;
  color: #666666;
}

.info_box-top-left {
  position: relative;
  line-height: 46rpx;
}

.info-floor-right {
  position: absolute;
  right: 2rpx;
}

.info-top-left-price {
  color: #f54831;
  margin-left: 10rpx;
}

.info-top-left-tip {
  display: inline-block;
  font-size: 23rpx;
  border: #0f76bc solid 1px;
  color: #0f76bc;
  padding: 0 5rpx;
}

.info_box-title {
  font-size: 35rpx;
  margin: 15rpx 0;
}

.info_box-top-right {
  position: absolute;
  right: 5rpx;
  color: #666666;
}

.goods_box image {
  width: 350rpx;
  height: 350rpx;
}

.goods_title {
  font-size: 35rpx;
}

.goods_price {
  font-size: 25rpx;
  overflow: auto;
  margin: 10rpx 0 25rpx 0;
}

.price-item {
  float: left;
  color: red;
}

.sales-volume {
  float: right;
  font-size: 35rpx;
  color: #999999;
}

.price_tip {
  font-size: 35rpx;
  color: red;
}

.price_main {
  font-size: 40rpx;
}

.price_dot {
  font-size: 30rpx;
  align-self: flex-end;
}

.goods_tip {
  display: inline-block;
  height: 40rpx;
  line-height: 40rpx;
  background-color: #f5e8e6;
  padding: 5rpx 10rpx;
  margin: 20rpx 0;
}

.goods_old_price {
  color: #89898a;
  text-decoration: line-through;
}
</style>
